<template>
  <div>
    <el-container>


      <!-- <el-button type="primary" icon="el-icon-platform-eleme" style="float: right;">维修首页</el-button>
        <el-button type="info" icon="el-icon-info" style="float: right;">通知公告</el-button>
        <el-button type="success" icon="el-icon-search" style="float: right;">服务指南</el-button>
        <el-button @click="jumpTo('/PersonalCenter')" type="warning" icon="el-icon-user-solid" style="float: right;">
          用户中心</el-button> -->
      <el-header>
        <el-button @click="jumpTo('/index')" type="primary" icon="el-icon-platform-eleme" style="float: right;">维修首页
        </el-button>
        <el-button @click="jumpTo('/notice')" type="info" icon="el-icon-info" style="float: right;">通知公告</el-button>
        <el-button @click="jumpTo('/serviceGuide')" type="success" icon="el-icon-search" style="float: right;">服务指南
        </el-button>
        <el-button @click="jumpTo('/PersonalCenter')" type="warning" icon="el-icon-user-solid" style="float: right;">
          用户中心</el-button>
      </el-header>
      <el-main>
        <div style="width: 500px;margin-top: 100px;margin-left: 200px;">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="报修人" prop="repairusername">
              <el-input :value="form.repairusername" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="userphone">
              <el-input v-model="form.userphone"></el-input>
            </el-form-item>
            <el-form-item label="维修区域" prop="repairarea">
              <el-select v-model="form.repairarea" placeholder="请选择活动区域">
                <el-option label="学生宿舍" value="1"></el-option>
                <el-option label="行政办公楼" value="2"></el-option>
                <el-option label="校内共工区域" value="3"></el-option>
                <el-option label="教学科研楼" value="4"></el-option>
                <el-option label="其他经营类或附属建筑" value="5"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维修项目" prop="repairtype">
              <el-select v-model="form.repairtype" placeholder="请选择活动区域">
                <el-option label="电工类" value="1"></el-option>
                <el-option label="木工类" value="2"></el-option>
                <el-option label="排污疏通" value="3"></el-option>
                <el-option label="房屋漏水" value="4"></el-option>
                <el-option label="油漆" value="5"></el-option>
                <el-option label="室内装修改造" value="6"></el-option>
                <el-option label="排修抢险" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预约时间" prop="orderrepairdate">
              <div class="block">
                <el-date-picker v-model="form.orderrepairdate" type="datetime" placeholder="选择日期时间"
                 :picker-options="pickerOptions"
                 @change="handle"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="故障原因" prop="repaircontent">
              <el-input type="textarea" v-model="form.repaircontent"></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="detaillocation">
              <el-input type="textarea" v-model="form.detaillocation"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">立即创建</el-button>
              <el-button @click="test()">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-top: -400px;float: right;margin-right: 400px;">
          <el-upload action="http://localhost:8888/repairAttachment/upload" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-success="success" :on-remove="handleRemove" :limit=1>
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "myrepair",
    data() {
      // 验证手机号的规则
      var checkMobile = (rule, value, callback) => {
        const reg = /^1[3456789]\d{9}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入有效的手机号码'));
        }
        callback();
      }
      return {
        form: {
          account: '',
          repairusername: '',
          userphone: '',
          //维修区域
          repairarea: '',
          //维修项目
          repairtype: '',
          //预约时间
          orderrepairdate: '',
          pickerOptions:{
            disabledDate(time) {
              return time.getTime() < Date.now(); // 选当前时间之后的时间
            }
          },
          //维修内容
          repaircontent: '',
          //详细地址
          detaillocation: '',
          //oss文件地址
          ossurl: '',
        },
        rules: {
          repaircontent: [{
              required: true,
              message: "不能为空",
              trigger: "blur"
            },
            {
              max: 300,
              message: "最大长度300字",
              trigger: "blur"
            }
          ],
          repairusername: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }, ],
          userphone: [{
            validator: checkMobile,
            trigger: 'blur'
          }],
          repairarea: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }, ],
          repairtype: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }, ],
          detaillocation: [{
              required: true,
              message: "不能为空",
              trigger: "blur"
            },
            {
              max: 100,
              message: "最大长度100字",
              trigger: "blur"
            }
          ],
          orderrepairdate: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }, ]
        },
        //照片上传
        dialogImageUrl: '',
        dialogVisible: false,
      }
    },
    methods: {
        handle(){
               new Date().getTime() > new Date(this.form.orderrepairdate).getTime() && (this.form.orderrepairdate = new Date());
           },
      onSubmit() {
        if (this.form.repairusername == "") {
          alert("姓名不能为空")
          return
        }
        if (this.form.repairarea == "") {
          alert("维修区域不能为空")
          return
        }
        if (this.form.repairtype == "") {
          alert("维修类别不能为空")
          return
        }
        if (this.form.orderrepairdate == "") {
          alert("预约时间不能为空")
          return
        }
        if (this.form.repaircontent == "") {
          alert("故障原因不能为空")
          return
        }
        if (this.form.detaillocation == "") {
          alert("详细地址不能为空")
          return
        }
        if (this.form.ossurl == null) {
          alert("请上传图片")
          return
        }
        if (this.form.ossurl == "") {
          alert("请上传图片")
          return
        }
        this.$http.post("/repairInfo/addrepair", this.form).then(resp => {
          if (resp.data.code == 200) {
            alert("预约成功")
            this.form = {
              brand_righr: 0
            }
            this.$router.push("/index")
          } else {
            alert("出错了")
          }
        })


      },
      jumpTo(route) {
        this.$router.push(route)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        this.form.ossurl = null
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      success(response, file, fileList) {
        console.log(response)
        this.form.ossurl = response.data
        console.log(this.form.ossurl)
      },
    },
    created() {
      var user = JSON.parse(localStorage.getItem("user"))
      console.log(user)
      this.form.account = user.data.account;
      this.form.repairusername = user.data.accountName;
      this.form.userphone = user.data.accountPhone;
      console.log(this.form)
    }
  }
</script>

<style>
  a {
    text-decoration: none
  }

  ;
</style>
